<template>
  <div style="width: 100%; height: 100%">
    <vxe-table
      ref="xTable"
      height="300"
      :data="tableData.data"
      border
      width="200"
    >
      <vxe-table-column
        :highlight-hover-row="true"
        v-for="(config, index) in tableData.column"
        :key="index + config.title"
        :type="config.type"
        :field="config.field"
        :title="config.title"
        :fixed="config.fixed"
        :width="config.width"
        min-width="100"
        :filters="config.filters"
      >
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: {
        column: [
          // { type: "seq", fixed: null },
          // { type: "checkbox", fixed: null },
          { field: "name", title: "Name" },
          { field: "nickname", title: "Nickname" },
          {
            field: "sex",
            title: "Sex",
            // width: 100,
            // filters: [{ value: "1", label: "男" }],
          },
          { field: "role", title: "Role" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
          { field: "address", title: "Address" },
        ],
        data: [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: "1",
            age: 28,
            address: "vxe-table 从入门到放弃",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: "0",
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: "1",
            age: 32,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: "0",
            age: 23,
            address: "vxe-table 从入门到放弃",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: "0",
            age: 30,
            address: "Shanghai",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: "0",
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: "1",
            age: 32,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: "0",
            age: 23,
            address: "vxe-table 从入门到放弃",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: "0",
            age: 30,
            address: "Shanghai",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: "0",
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: "1",
            age: 32,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: "0",
            age: 23,
            address: "vxe-table 从入门到放弃",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: "0",
            age: 30,
            address: "Shanghai",
          },
          {
            id: 10006,
            name: "Test6",
            nickname: "T6",
            role: "Designer",
            sex: "0",
            age: 21,
            address: "vxe-table 从入门到放弃",
          },
          {
            id: 10007,
            name: "Test7",
            nickname: "T7",
            role: "Test",
            sex: "1",
            age: 29,
            address: "vxe-table 从入门到放弃",
          },
          {
            id: 10008,
            name: "Test8",
            nickname: "T8",
            role: "Develop",
            sex: "1",
            age: 35,
            address: "vxe-table 从入门到放弃",
          },
        ],
      },
    };
  },
};
</script>

<style>
</style>